<template>
  <k-view class="rank-chart-block">
    <k-view class="rank-chart-title">
      <k-text class="rank-chart-title-text">{{ titleType }}健康度排名</k-text>
      <k-text @click="goRank" :class="['rank-chart-title-subtext']">更多</k-text>
    </k-view>
    <k-view class="rank-chart-content">
      <reload-view v-if="isEmpty || isLoading" :loading="isLoading" @reload="reload"> </reload-view>
      <LinkageHistogram
        v-else
        :themeType="'mobile-app-' + theme"
        :data="chartData"
        @click-tab="clickTab"
        :max="maxNum"
        :min="minNum"
      ></LinkageHistogram>
    </k-view>
  </k-view>
</template>

<script>
import { jumpByUrl } from '@/utils';
import { sendClickStat } from '@/utils/stat';
import { INDEX_TAB_ID, PAGEID } from '@/config/stat';
import reloadView from '@/components/Home/rankReload.vue';

export default {
  props: {
    isEmpty: {
      type: Boolean,
      default: false,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    theme: {
      type: String,
      default: '',
    },
    chartData: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: '',
    },
  },
  components: {
    reloadView,
  },
  methods: {
    reload() {
      this.$emit('reload');
    },
    clickTab(oldIndex, newIndex) {
      if (this.chartData[newIndex]) {
        this.$emit('changeCode', this.chartData[newIndex]);
      }
    },
    goRank() {
      const typeMap = {
        industry: { tabId: 3, pageId: INDEX_TAB_ID[3] },
        region: { tabId: 4, pageId: INDEX_TAB_ID[4] },
        default: { tabId: 1, pageId: '' },
      };
      const { tabId, pageId } = typeMap[this.type] || typeMap.default;
      pageId && sendClickStat(`${PAGEID.INDEX}.${pageId}.more.click`);
      jumpByUrl({ name: 'rank', query: { activeTab: tabId } });
    },
    findMaxScoreItem(list) {
      let result = 0;
      list.forEach(item => {
        if (item.value >= result) {
          result = item.value + 1;
        }
      });
      return result;
    },
    findMinScoreItem(list) {
      let result = 100;
      list.forEach(item => {
        if (item.value <= result) {
          result = item.value - 1;
        }
      });
      return result;
    },
  },
  computed: {
    maxNum() {
      return Number(this.findMaxScoreItem(this.chartData).toFixed());
    },
    minNum() {
      return Number(this.findMinScoreItem(this.chartData).toFixed());
    },
    titleType() {
      if (this.type === 'industry') {
        return '全行业';
      } else if (this.type === 'region') {
        return '全地区';
      } else {
        return '';
      }
    },
  },
};
</script>

<style lang="less">
.rank-chart-block {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  .rank-chart-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: url(../../assets/index/right_arrow.png);
    background-repeat: no-repeat;
    background-size: 14px 24px;
    background-position: 100% 36%;
    .rank-chart-title-text {
      font-size: 36px;
      color: #262626;
      font-weight: 500;
      line-height: 50px;
    }
    .rank-chart-title-subtext {
      color: rgba(0, 0, 0, 0.4);
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      padding-right: 28px;
    }
  }
}
[theme-mode='black'] {
  .rank-chart-block {
    background-color: #1c1c1c;
    .rank-chart-title {
      background-image: url(../../assets/index/right_arrow_light.png);
    }
    .rank-chart-title-text {
      color: rgba(255, 255, 255, 0.84);
    }
    .rank-chart-title-subtext {
      color: rgba(255, 255, 255, 0.4);
    }
  }
}
</style>
